import styles from './goodsRow.module.scss';
import { useState } from 'react';
import { message } from 'antd';
const GoodsRow = ({ data, onDelete, onEdit }) => {
    const {
        index,
        name,          // 物品名称
        description,   // 物品描述
        image,        // 物品图片
        location,     // 物品地点
        status,       // 物品状态
        type,         // 物品类别
        date,         // 发布时间
        publisher     // 发布人
    } = data;

    const [isEditing, setIsEditing] = useState(false);
    const [editedData, setEditedData] = useState({
        name,
        description,
        location,
        status,
        type,
        date,
        publisher
    });

    const handleEdit = () => {
        setIsEditing(true);
    };

    const handleSave = () => {
        onEdit(index, editedData);
        setIsEditing(false);
        message.success('修改成功');
    };

    const handleCancel = () => {
        setEditedData({
            name,
            description,
            location,
            status,
            type,
            date,
            publisher
        });
        setIsEditing(false);
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setEditedData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    return (
        <div className={styles.goodsRow}>
            <div className={styles.goodsRow__cell} title={index}>{index}</div>
            {isEditing ? (
                <>
                    <div className={styles.goodsRow__cell}>
                        <input
                            type="text"
                            name="name"
                            value={editedData.name}
                            onChange={handleChange}
                            className={styles.goodsRow__input}
                        />
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <input
                            type="text"
                            name="description"
                            value={editedData.description}
                            onChange={handleChange}
                            className={styles.goodsRow__input}
                        />
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <img src={image} alt={name} className={styles.goodsRow__image} />
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <input
                            type="text"
                            name="location"
                            value={editedData.location}
                            onChange={handleChange}
                            className={styles.goodsRow__input}
                        />
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <select
                            name="status"
                            value={editedData.status}
                            onChange={handleChange}
                            className={styles.goodsRow__select}
                        >
                            <option value="待寻找">待寻找</option>
                            <option value="待认领">待认领</option>
                            <option value="待出售">待出售</option>
                            <option value="寻找中">寻找中</option>
                            <option value="已找到">已找到</option>
                            <option value="已认领">已认领</option>
                            <option value="已出售">已出售</option>
                        </select>
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <select
                            name="type"
                            value={editedData.type}
                            onChange={handleChange}
                            className={styles.goodsRow__select}
                        >
                            <option value="生活用品">生活用品</option>
                            <option value="学习用品">学习用品</option>
                            <option value="电子产品">电子产品</option>
                            <option value="证件">证件</option>
                            <option value="教材">教材</option>
                            <option value="饰品">饰品</option>
                        </select>
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <input
                            type="text"
                            name="date"
                            value={editedData.date}
                            onChange={handleChange}
                            className={styles.goodsRow__input}
                        />
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <input
                            type="text"
                            name="publisher"
                            value={editedData.publisher}
                            onChange={handleChange}
                            className={styles.goodsRow__input}
                        />
                    </div>
                    <div className={styles.goodsRow__cell}>
                        <button
                            className={styles.goodsRow__saveBtn}
                            onClick={handleSave}
                        >
                            保存
                        </button>
                        <button
                            className={styles.goodsRow__cancelBtn}
                            onClick={handleCancel}
                        >
                            取消
                        </button>
                    </div>
                </>
            ) : (
                <>
                    <div className={styles.goodsRow__cell} title={name}>{name}</div>
                    <div className={styles.goodsRow__cell} title={description}>{description}</div>
                    <div className={styles.goodsRow__cell}>
                        <img src={image} alt={name} className={styles.goodsRow__image} />
                    </div>
                    <div className={styles.goodsRow__cell} title={location}>{location}</div>
                    <div className={styles.goodsRow__cell} title={status}>{status}</div>
                    <div className={styles.goodsRow__cell} title={type}>{type}</div>
                    <div className={styles.goodsRow__cell} title={date}>{date}</div>
                    <div className={styles.goodsRow__cell} title={publisher}>{publisher}</div>
                    <div className={styles.goodsRow__cell}>
                        <button
                            className={styles.goodsRow__editBtn}
                            onClick={handleEdit}
                        >
                            修改
                        </button>
                        <button
                            className={styles.goodsRow__deleteBtn}
                            onClick={() => onDelete(index)}
                        >
                            删除
                        </button>
                    </div>
                </>
            )}
        </div>
    );
};

export default GoodsRow; 